/**
 * Created by Administrator on 2016/12/29 0029.
 */
(function($){
    $.extend($.fn,{
        /*
        * obj:nav的上一个兄弟元素
        * Data为ajax请求的数据
        * num：为索引数字；
        * */
        renderNav:function(obj,Data){
            $(obj).after('<nav class="bai_nav"><ul class="bai_ul"></ul><div class="redLine"><i></i></div><div class="bai_search">搜索</div></nav>')
            var baiul=$(".bai_ul");//nav的ul；
            var redLine=$(".redLine")//红色线；
            var baiulwidth=0;//ul的宽度；
            var x=0,x_= 0,currtx= 0,baiulx=0;
            var bodywidth=$('body').offset().width;//页面宽度
            var baiSearch=$('.bai_search')//搜索框
            var baiSearchWidth=baiSearch.offset().width//搜索的宽度；
            var flag=false;//标记数据的返回情况
            var active='';
            $.ajax({
            type: 'get',
            url: 'http://mmb.ittun.com/api/getbaicaijiatitle',
            data: {},
            success: function (data) {
                Data = data.result||Data;
                flag=true;
                console.log(Data)
            },
            error:function(XMLHttpRequest,textStatus,errorThrown){
                console.log(XMLHttpRequest,textStatus,errorThrown)
                alert('无法连接服务器')
            }
        })
        var timeTwo=setInterval(function(){
            if(flag){
                flag=false;
                clearInterval(timeTwo)
                $.each(Data,function(i,items){
                        active=i==0?"active":'';
                        baiul.append('<li class="li '+active+'" data-id='+items.titleId+'><a href="javascript:;">'+items.title+'</a></li>')
                        baiulwidth+=baiul.children().eq(i).width()
                    })
                    baiul.width(baiulwidth)
                    //设置红色线条的宽；
                    setTimeout(function(){
                        redLine.width(baiul.children('.active').width()).children('i').width(baiul.children('.active').children('a').width());
                    },50)
            }
        },10)    
            
            //导航栏单击事件、、
            $.fn.tap1(".bai_ul",function(e){
                var tar=$(e.target).parent()["0"].classList.contains('li')?$(e.target).parent():$(e.target);
                num=tar.get(0).dataset["id"];
                var redLineLeft=0;
                for(var i=0;i<num;i++){
                    redLineLeft+=baiul.children().eq(i).width();
                }
               tar.addClass('active').siblings().removeClass('active')
                redLine.animate({
                    left:redLineLeft+"px"
                })
                redLine.children('i').animate({
                    width:tar.children('a').width()+"px"
                })
                setTimeout(function(){
                    $.fn.product(num);
                },50)

            });
            //移动事件
            baiul.on("touchstart",function(e){
                x= e.touches[0].clientX;
            })
            baiul.on("touchmove",function(e){
                x_=e.touches[0].clientX-x;
                currtx=baiulx+x_;
                if(currtx<=bodywidth/8&&currtx>=(-baiulwidth+bodywidth-baiSearchWidth-bodywidth/8)){
                    $(this).css({transform:"translateX("+(currtx)+"px)"})
                    redLine.css({transform:"translateX("+(currtx)+"px)"})
                }
            })
            baiul.on("touchend",function(e){
                if(Math.abs(x_)>0){
                    baiulx=currtx;
                    if(baiulx>=0){
                        baiulx=0;
                        $(this).css({transform:"translateX(0px)"})
                        redLine.css({transform:"translateX(0px)"})
                    }
                    if(baiulx<=(-baiulwidth+bodywidth)){
                        baiulx=(-baiulwidth+bodywidth-baiSearchWidth);
                        $(this).css({transform:"translateX("+(-baiulwidth+bodywidth-baiSearchWidth)+"px)"})
                        redLine.css({transform:"translateX("+(-baiulwidth+bodywidth-baiSearchWidth)+"px)"})
                    }
                    currtx=x_=0;
                }
            })

        },
        tap1:function(select,callback){
            var st =0;
            var flag = true;
            $(select).on("touchstart",function(e){
                st = new Date();
            })
            $(select).on("touchmove",function(e){
                flag = false;
            })
            $(select).on("touchend",function(e){
                st = new Date()-st;
                if(st<=200&&flag){
                    callback&&callback(e);
                }
                flag=true;
            })
        },
        product:function(num){
            $.ajax({
                type: 'get',
                url: 'http://mmb.ittun.com/api/getbaicaijiaproduct',
                data:{titleid:num},
                beforeSend:function(){
                    $(".bai_main").html('<div class="onload">加<br/>载<br/>中<br/>.<br/>.<br/>.<br/></div>')
                },
                success: function (data) {
                    var cone=data.result;
                    var html = template("templateBai",{"items":cone}).replace(/&#60;/ig,'<').replace(/&#62;/ig,'>').replace(/&#34;/ig,'');
                    $(".bai_main").html(html)
                    var imgs=$(".bai_main").find('img');
                    var ni=0;
                    abc();
                    function abc(){
                        $(imgs[0]).width()>0?setHeoght(".bai_section"):abc();
                        ni++;
                        if(ni>10){return;}
                    }

                },
                error:function(XMLHttpRequest,textStatus,errorThrown){
                    console.log(XMLHttpRequest,textStatus,errorThrown)
                }
            })
            //设置商品列表里面的一些样式
            function setHeoght(obj){
                var protucts=$(obj);
                var protuctsHeight=bodyWidth<500?bodyWidth/2.5:bodyWidth/3.5
                $.each(protucts,function(key,protuct){
                    $(protuct).height(protuctsHeight);
                    $(protuct).find('.bai_title').css({
                        fontSize:protuctsHeight*0.4/3,
                        lineHeight:protuctsHeight*0.4/2+"px"
                    })
                    $(protuct).find('.bai_linjuan').css({
                        fontSize:protuctsHeight*0.15/2,
                    })
                    $(protuct).find('.bai_quan div').css({
                        lineHeight:$(protuct).find('.bai_quan div').height()+'px',
                    })
                    $(protuct).find('.bai_linjuan').css({
                        lineHeight:protuctsHeight*0.15+"px",
                    })
                })
            }
        }
    })
})(Zepto)
